<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-08-26 15:32:36
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-11-04 09:35:27
 * @FilePath: \school-shop-vue\components\my-search\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view>
    <!-- #ifdef APP-PLUS -->
    <view class="status_bar"></view>
    <view class="search_height"></view>
    <!-- #endif -->

    <view class="search_style" :style="styleBg">
      <view class="search flex flex_col_center" @click="searchPage">
        <text class="custom-icon custom-icon-chazhao"></text>
        <text class="key">搜公司名称</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // props: ['from', 'zid', 'notTop', 'bgColor'], //notTop:这里默认是搜索在页面最上方，设置了高度。还有搜索框不在最上方的情况
  props: {
    from: String,
    zid: String,
    notTop: Boolean,
    bgColor: {
      type: String,
      default: "#F0F1F3",
    },
  },
  methods: {
    searchPage() {
      uni.navigateTo({
        url: `/pages/index/search?from=${this.from}&zid=${this.zid}`,
      });
    },
  },
  computed: {
    styleBg() {
      return {
        "--bgColor": this.bgColor,
        "--top": this.notTop ? "top:unset" : "",
      };
    },
  },
};
</script>

<style lang="scss">
$bg: var(--bgColor);

.status_bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bgColor) !important;
  height: var(--status-bar-height);
  z-index: 1000;
}

.search_style {
  //   position: fixed;
  // #ifndef MP-WEIXIN
  //   top: var(--status-bar-height);
  // top: var(--top);
  //#endif
  left: 0;
  right: 0;
  z-index: 9;
  background: var(--bgColor) !important;
  padding: 0 20rpx;
  //   border-bottom: 1rpx solid #e1e1e1;

  .search {
    border-radius: 40px;
    background: #f0f1f3;
    padding: 0 38rpx;
    box-sizing: border-box;
    height: 60rpx;
    margin: 20rpx 0 20rpx;
  }

  .key {
    margin-left: 5px;
    font-size: 30rpx;
    color: #ccc;
    margin-bottom: 6rpx;
  }
}

.search_height {
  height: 100rpx;
}
</style>
